<template>
  <div id="pop">
    <div class="move_bg" v-if="popwindow.show == 1">
      <div class="title">
        “显示悬浮窗”权限
      </div>
      <div class="content scroller">
        <div class="desc">
          <span class="tag">1</span>
          <p>滑动到设置列表底部，找到“显示悬浮窗”，点击并选择“允许”</p>
        </div>
        <div class="img">
          <img src="">
        </div>
        <button @click="go_set(1)">前往设置</button>
      </div>
    </div>
    <div class="move_bg" v-if="popwindow.show == 2">
      <div class="title">
        “允许访问使用记录”权限
      </div>
      <div class="content scroller">
          <div class="desc">
            <span class="tag">1</span>
            <p>打开授权页列表，滑动并找到“游易赚”</p>
          </div>
          <div class="img sm">
            <img src="">
          </div>
          <div class="desc">
            <span class="tag">2</span>
            <p>开启"允许访问使用记录"权限</p>
          </div>
          <div class="img sm">
            <img src="">
          </div>
          <button @click="go_set(2)">前往设置</button>
      </div>
    </div>
    <div class="move_bg" v-if="popwindow.show == 4">
      <div class="title">
        “后台弹出界面”权限
      </div>
      <div class="content scroller">
        <div class="desc">
          <span class="tag">1</span>
          <p>滑动到设置列表底部，找到“后台弹出界面”，点击并选择“允许”</p>
        </div>
        <div class="img sm">
          <img src="">
        </div>
        <button @click="go_set(3)">前往设置</button>
      </div>
    </div>
    <div class="move_bg" v-if="popwindow.show == 3">
      <div class="title">
        {{popwindow.title}}<Icon @click="close()" type="md-close" />
      </div>
      <div class="content text" v-html="popwindow.content_text"></div>
    </div>
  </div>
</template>

<script>

  export default {
    props: {
      popwindow: {
      },
    },
    components: {
    },
    
    data() {
      return {
      };
    },
    
    mounted() {
      
    },
    updated() {
      if(this.popwindow.show) {
        let child = document.getElementById("pop");
        document.body.appendChild(child);
      }
    },
    methods: {
      go_set(num) {
        if (num == 1) {
          // 悬浮窗
          this.popwindow.show = 0;
        } else if (num == 2) {
          // 使用记录
          this.popwindow.show = 0;
        } else if (num == 3) {
          // 后台弹出
          this.popwindow.show = 0;
        }
      },
      close() {
        this.popwindow.show = 0;
      }
    }
  };
</script>

<style lang="less" scoped>
  .move_bg {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    animation: move 0.5s forwards;
    z-index: 9991;
  }
  .title {
    position: relative;
    box-sizing: border-box;
    padding: 16px 0px;
    color: #333;
    font-size: 15px;
    height: 48px;
    text-align: center;
    background-color: #fff;
    margin-bottom: 10px;
    i {
      position: absolute;
      top: 9px;
      right: 9px;
    }
  }
  .content {
    flex: 1;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px 15px;
    .desc {
      display: flex;
      margin-bottom: 10px;
      .tag {
        margin-right: 6px;
        box-sizing: border-box;
        display: block;
        text-align: center;
        padding: 3px 0px;
        flex-shrink: 0;
        width:24px;
        height:24px;
        background:linear-gradient(142deg,rgba(107,216,255,1) 0%,rgba(8,168,255,1) 100%);
        border-radius:50%;
        font-size: 12px;
        color: #fff;
      }
      p {
        color: #333;
        font-size: 15px;
      }
    }
    .img {
      width: 345px;
      height: 260px;
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
      &.sm {
        height: 196px;
        margin-bottom: 20px;
      }
    }
    button {
      margin: 0px auto;
      display: block;
      width:240px;
      height:40px;
      background:linear-gradient(90deg,rgba(255,163,38,1) 0%,rgba(255,98,39,1) 100%);
      border-radius:19px;
      font-size: 14px;
      color: #fff;
    }
    &.text {
      font-size: 13px;
      color: #333;
      line-height: 16px;
      padding: 15px;
      padding-bottom: 0px;
    }
  }
  @keyframes move {
    0% {
      opacity: 0;
      top: 100%;
    }
    100% {
      opacity: 1;
      top: 0px;
    }
  }
</style>
